<template>
  <section>
    <header class="header-area">
      <div class="main-header">
        <div class="container">
          <div class="row">
            <div class="col-lg-12" style="width: 100%;">
              <div
                class="main-header-item d-flex justify-content-between align-items-center"
              >
                <div class="main-header-menus  d-flex">
                  <div class="logo" style="height: 10px">
                    <a href="/"
                      ><img
                        style="height: 70px"
                        src="/assets/images/logo.png"
                        alt=""
                    /></a>
                  </div>

                  <div class="header-menu d-none d-lg-block">
                    <ul>
                      <li>
                        <a class="active" @click="$router.push('/')">首页</a>
                      </li>
                      <li>
                        <a href="#" @click="toRouter()">信息智能处理</a>
                        <ul v-if="username" class="sub-menu">
                          <li>
                            <nuxt-link to="/search">信息处理</nuxt-link>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#" @click="toRouter()">智能处理样理展示</a>
                        <ul v-if="username" class="sub-menu">
                          <li>
                            <nuxt-link to="/single-service">样例展示</nuxt-link>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#" @click="toRouter()">经典作者介紹</a>
                        <ul v-if="username" class="sub-menu">
                          <li><nuxt-link to="/authors">作者介绍</nuxt-link></li>
                          <li>
                            <nuxt-link to="/single-author">作者详情</nuxt-link>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#" @click="toRouter()">查看历史记录</a>
                        <ul v-if="username" class="sub-menu">
                          <li><nuxt-link to="/hist">历史记录</nuxt-link></li>
                        </ul>
                      </li>
                      <li>
                        <a v-if="!username" @click="$router.push('login')"
                          >去登陆</a
                        >
                        <span v-else>{{ username }}</span>
                      </li>
                      <li>
                        <a v-if="username" @click="Esc()">退出</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div
      class="container"
      style="border-radius: 5px;border: 1px solid rgba(0,0,0,0.5); margin: 90px auto 0 auto;width: 470px;height: 290px"
    >
      <el-form
        ref="userForm"
        :rules="rules"
        :model="userForm"
        label-width="100px"
        class="demo-dynamic"
        style="margin: 35px 5px"
      >
        <el-form-item prop="username" label="用户名">
          <el-input v-model="userForm.username"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input v-model="userForm.password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm()">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </section>
</template>
<script>
import { eventBus } from "@/plugins/event-bus";
export default {
  data() {
    //登入时用户名不存在
    const rulesLoguser = (rule, value, callback) => {
      //使用axios进行校验
      this.$axios
        .post(this.baseURL + "check_username/", {
          username: value
        })
        .then(res => {
          //请求成功
          if (res.data.code === 1) {
            if (res.data.exists) {
              callback();
            } else {
              callback(new Error("用户名不存在！请重新输入"));
            }
          } else {
            //请求失败
            callback(new Error(res.data.msg));
          }
        })
        .catch(err => {
          //失败则后台打印
          console.log(err);
        });
    };
    return {
      baseURL: "http://127.0.0.1:8000/",
      username: "",
      userForm: { username: null, password: null },
      rules: {
        //登录，
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          //此处写检查用户名是否存在
          { validator: rulesLoguser, trigger: "blur" }
        ],
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
    //退出
    Esc() {
      this.username = "";
      console.log("登出");
      localStorage.clear();
      this.$router.push("/");
    },
    loginSuccess(username) {
      eventBus.$emit("login-success", username);

      console.log(this.userForm.username + "!!");
    },
    toRouter() {
      if (this.username === "") {
        this.$confirm("请先完成登录", "提示", {
          distinguishCancelAndClose: true,
          confirmButtonText: "確定",
          cancelButtonText: "取消"
        })
          .then(() => {})
          .catch(action => {
            console.log("取消");
          });
      } else {
        this.$router.push("/search");
      }
    },
    submitForm() {
      //登录
      var flag = 0;
      if (this.userForm.username === "") {
        this.$message.error("用户名不能为空");
      } else if (this.userForm.password === "") {
        this.$message.error("密码不能为空");
      } else {
        let that = this;
        this.$axios
          .post(this.baseURL + "check_password/", {
            username: that.userForm.username,
            password: that.userForm.password
          })
          .then(res => {
            if (res.data.code === 1) {
              if (res.data.exists) {
                that.$message({
                  message: "登录成功！",
                  type: "success"
                });

                //页面之间的通信
                // JSON.stringify将要序列化成 一个JSON 字符串的值，将值存在sessionStorage读取或保存数据中，设置key值为user
                localStorage.setItem(
                  "user",
                  JSON.stringify({
                    username: that.userForm.username,
                    password: that.userForm.password
                  })
                );
                (this.username = that.userForm.username),
                  that.$router.push("/search");
              } else {
                this.$message.error(res.data.msg);
              }
            } else {
              console.log(res.data.code);
              this.$message.error(res.data.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  }
};
</script>
